iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 1
1
Modern Web

寫React的那些事系列 第 1

React Day1 - 開發工具簡單說

  • 分享至 

  • xImage
  •  

[前言]


前端技術這幾年真的變化很快,常常會覺得有好多名詞冒出來,這兩年因為工作上的關係開始使用React,透過使用React可以學習到其他現在前端開發熱門的一些技能,Ex:ES6+、Module、Babel、Webpack...等,希望能用分享的方式,從React出發把學到的好好記錄下來!

Reactjs


React是由Facebook推出的JS Library,官方網站一打開就寫著:

「A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES」

它是一個專注在View/UI的Library,React 0.14版本之後,又把處理DOM的部分獨立出來(react-dom),讓核心更單純。由於很多人都覺得major版號一直是0,感覺unstable,在今年初React直接從0.14.x升到15.0.0,所以是找不到1.0.0版的。

ES6+


ES6+是ES6(ES2015)和ES7的聯集,有許多新的特性和功能,因為ES6+在browser的支援度會越來越好,所以之後的demo都會用ES6+的語法來進行,之後也會用babel+webpack來幫忙處理build的部分。

Babel


Babel 是一個Javascript Compiler,可以幫忙把ES6、JSX的語法轉成瀏覽器看得懂的語法。如果是用CLI(command-line interface)執行compile,要在根目錄上放一個 .babelrc 檔案,config babel設定,或是也可以用package.json來設定。不過,後面會提到使用webpack來build的方式,所以這邊babel設定的方式可以當參考。

Directory structure

app
├── .babelrc
├── packag.json
├── index.jsx
└── index.html

[Config方式一]

設定 .babelrc

{
  "presets": ["es2015", "react"]
}

[Config方式二]

設定 package.json

{
  "name": "app",
  "version": "1.0.0",
  "babel": {
    "presets": ["es2015", "react"]
  }
}

Webpack


Webpack是一個Module Bundler,幫你把許多不同類型的模組build成靜態資源,可以同時整合CommonJS和AMD,還有很多loaders跟plugins可以使用。Config的方式也是在根目錄放一個webpack.config.js檔案,這個檔案也可以依照prod或是dev環境不同命名,Ex:webpack.config.prod.js、webpack.config.dev.js。

webpack.config.js

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  }
};

CLI

// 基本CLI指令
webpack

// 自行指定config檔
webpack --config webpack.config.prod.js
webpack --config webpack.config.dev.js

NPM


NPM(Node Package Manager)是Node.js的套件管理工具,在上面可以搜尋的到很多很厲害的套件,都可以透過npm引用在我們的專案中。

好想說的更簡單一些,可是真的就會用到這麼多東西XD
每一個又都可以多些很多篇,可是我覺得有用到的時候才更能體會
所以讓我們先簡單看一下,後面再一步一步的把工具與設定加上去!
加油,我們都不要放棄~


下一篇
React Day2 - JSX
系列文
寫React的那些事31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言